<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/echarts/echarts.js"></script>
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header" >
        <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#379ae0"
                text-color="#fff"
                active-text-color="#e4a61e">
            <el-menu-item index="1"><a href="AdminIndex.html">学生管理中心</a></el-menu-item>
            <el-menu-item index="3" ><a href="AdminIndex_message.html">消息管理中心</a></el-menu-item>
            <el-menu-item index="3" ><a href="AdminStu_inSchool.html">到校统计</a></el-menu-item>
        </el-menu>
    </div>
    <!--查询条件-->
    <div class="filter-container" style="margin-left: 200px">
        <el-select v-model="major" style="width: 100px;"   placeholder="专业">
            <el-option label="计算机" :value="1" >计算机科学与技术</el-option>
            <el-option label="电子与技术" :value="2">电子与技术</el-option>
            <el-option label="全校" :value="99">全校</el-option>
        </el-select>
        <!--在条件查询时初始化currentPage的值为1-->
        <el-button @click="findPage()" class="dalfBut">执行查询</el-button>
    </div>
    <div class="app-container">
        <div class="box">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="chart1" style="height:600px;"></div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data:{
            major:'',
        },
        //钩子函数，VUE对象初始化完成后自动执行
        mounted() {
            this.findPage();
        },
        methods: {
            findPage(){
                let myChart1 = echarts.init(document.getElementById('chart1'));
                axios.get("/report/getStuReport?major="+this.major).then((res)=>{
                    myChart1.setOption(
                        {
                            title: {
                                text: '学生报道人数统计',
                                subtext: '测试',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                            },
                            series: [
                                {
                                    name: '访问来源',
                                    type: 'pie',
                                    radius: '50%',
                                    data: [
                                        {value: res.data.data.OK, name: '已到校学生人数'},
                                        {value: res.data.data.NOTOK, name: '未到校学生人数'}
                                    ],
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        });
                });
            }
        }
    })

</script>
</html>
